<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>照片墙 - 慢生活 · 旅行日记</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            neutral: '#F5F7FA',
            dark: '#333647',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-float-delay-1 {
        animation: float 6s ease-in-out 1s infinite;
      }
      .animate-float-delay-2 {
        animation: float 6s ease-in-out 2s infinite;
      }
      .masonry-grid {
        column-count: 1;
        column-gap: 1.5rem;
      }
      @screen md {
        .masonry-grid {
          column-count: 2;
        }
      }
      @screen lg {
        .masonry-grid {
          column-count: 3;
        }
      }
      .masonry-item {
        break-inside: avoid;
        margin-bottom: 1.5rem;
      }
      .photo-card {
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .photo-card:hover {
        transform: translateY(-8px);
      }
      .photo-card:hover img {
        transform: scale(1.02);
        filter: brightness(1.05);
      }
      .photo-card img {
        transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .photo-overlay {
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease-out;
      }
      .photo-card:hover .photo-overlay {
        opacity: 1;
        transform: translateY(0);
      }
      .like-btn {
        transform: scale(0.8);
        opacity: 0;
        transition: all 0.3s ease-out 0.1s;
      }
      .photo-card:hover .like-btn {
        transform: scale(1);
        opacity: 1;
      }
      .share-btn {
        transform: scale(0.8);
        opacity: 0;
        transition: all 0.3s ease-out 0.2s;
      }
      .photo-card:hover .share-btn {
        transform: scale(1);
        opacity: 1;
      }
      .expand-btn {
        transform: scale(0.8);
        opacity: 0;
        transition: all 0.3s ease-out 0.3s;
      }
      .photo-card:hover .expand-btn {
        transform: scale(1);
        opacity: 1;
      }
      .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
      }
      @keyframes skeleton-loading {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }
    }
    
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0px); }
    }
  </style>
</head>
<body class="font-inter bg-neutral text-dark min-h-screen">
  <!-- 页面容器 -->
  <div id="app" class="min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md z-50 transition-all duration-300 shadow-sm">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <a href="#" class="text-2xl font-bold text-primary flex items-center">
          <i class="fa-solid fa-paper-plane mr-2"></i>
          <span>慢生活</span>
        </a>
        
        <div class="hidden md:flex space-x-8">
          <a href="#" class="nav-link font-medium">首页</a>
          <a href="#" class="nav-link font-medium">旅行足迹</a>
          <a href="#" class="nav-link font-medium">照片墙</a>
          <a href="#" class="nav-link font-medium">视频分享</a>
          <a href="#" class="nav-link font-medium">日历</a>
        </div>
        
        <div class="md:hidden">
          <button id="menu-toggle" class="text-dark focus:outline-none">
            <i class="fa-solid fa-bars text-xl"></i>
          </button>
        </div>
      </div>
      
      <!-- 移动端菜单 -->
      <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
        <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
          <a href="#" class="py-2 font-medium">首页</a>
          <a href="#" class="py-2 font-medium">旅行足迹</a>
          <a href="#" class="py-2 font-medium">照片墙</a>
          <a href="#" class="py-2 font-medium">视频分享</a>
          <a href="#" class="py-2 font-medium">日历</a>
        </div>
      </div>
    </nav>
    
    <!-- 页面内容 -->
    <main class="flex-grow pt-16">
      <!-- 照片墙详情页 -->
      <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
          <!-- 面包屑导航 -->
          <div class="flex items-center text-sm text-dark/60 mb-8">
            <a href="#" class="hover:text-primary transition-colors">首页</a>
            <i class="fa-solid fa-chevron-right mx-2 text-xs"></i>
            <a href="#" class="hover:text-primary transition-colors">照片墙</a>
          </div>
          
          <!-- 照片墙标题 -->
          <div class="text-center mb-12">
            <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-dark mb-4">旅行中的美好瞬间</h2>
            <div class="w-20 h-1 bg-primary mx-auto mb-6"></div>
            <p class="text-lg text-dark/70 max-w-2xl mx-auto">用镜头记录下每一个值得珍藏的时刻，分享旅行中的美好与感动</p>
          </div>
          
          <!-- 筛选器 -->
          <div class="flex flex-wrap justify-center gap-3 mb-12">
            <button class="bg-primary text-white px-5 py-2 rounded-full text-sm font-medium shadow-md hover:shadow-lg transition-shadow">
              全部
            </button>
            <button class="bg-white text-dark/70 hover:bg-primary hover:text-white px-5 py-2 rounded-full text-sm font-medium shadow-md hover:shadow-lg transition-all">
              自然风光
            </button>
            <button class="bg-white text-dark/70 hover:bg-primary hover:text-white px-5 py-2 rounded-full text-sm font-medium shadow-md hover:shadow-lg transition-all">
              城市建筑
            </button>
            <button class="bg-white text-dark/70 hover:bg-primary hover:text-white px-5 py-2 rounded-full text-sm font-medium shadow-md hover:shadow-lg transition-all">
              人文风情
            </button>
            <button class="bg-white text-dark/70 hover:bg-primary hover:text-white px-5 py-2 rounded-full text-sm font-medium shadow-md hover:shadow-lg transition-all">
              美食特色
            </button>
            <button class="bg-white text-dark/70 hover:bg-primary hover:text-white px-5 py-2 rounded-full text-sm font-medium shadow-md hover:shadow-lg transition-all">
              生活日常
            </button>
          </div>
          
          <!-- 瀑布流照片墙 -->
          <div class="masonry-grid">
            <!-- 照片项目 1 -->
            <div class="masonry-item">
              <div class="photo-card bg-white rounded-xl overflow-hidden shadow-lg relative">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/29/800/1200" alt="山间云雾" class="w-full object-cover">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div class="absolute inset-0 photo-overlay flex flex-col justify-between p-6">
                    <div class="flex justify-end space-x-3">
                      <button class="like-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-heart"></i>
                      </button>
                      <button class="share-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-share-alt"></i>
                      </button>
                      <button class="expand-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-expand"></i>
                      </button>
                    </div>
                    <div>
                      <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">自然风光</span>
                      <h3 class="text-xl font-bold text-white mt-2">山间云雾</h3>
                      <p class="text-white/80 text-sm mt-1">清晨的山间，云雾缭绕，宛如仙境。</p>
                    </div>
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                      <span class="ml-2 text-sm font-medium">慢生活</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 245</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 18</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 照片项目 2 -->
            <div class="masonry-item">
              <div class="photo-card bg-white rounded-xl overflow-hidden shadow-lg relative">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/42/800/600" alt="街头美食" class="w-full object-cover">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div class="absolute inset-0 photo-overlay flex flex-col justify-between p-6">
                    <div class="flex justify-end space-x-3">
                      <button class="like-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-heart"></i>
                      </button>
                      <button class="share-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-share-alt"></i>
                      </button>
                      <button class="expand-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-expand"></i>
                      </button>
                    </div>
                    <div>
                      <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">美食特色</span>
                      <h3 class="text-xl font-bold text-white mt-2">街头美食</h3>
                      <p class="text-white/80 text-sm mt-1">城市小巷里的特色美食，总能带给人意想不到的惊喜。</p>
                    </div>
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                      <span class="ml-2 text-sm font-medium">慢生活</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 312</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 24</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 照片项目 3 -->
            <div class="masonry-item">
              <div class="photo-card bg-white rounded-xl overflow-hidden shadow-lg relative">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/65/800/1000" alt="城市夜景" class="w-full object-cover">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div class="absolute inset-0 photo-overlay flex flex-col justify-between p-6">
                    <div class="flex justify-end space-x-3">
                      <button class="like-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-heart"></i>
                      </button>
                      <button class="share-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-share-alt"></i>
                      </button>
                      <button class="expand-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-expand"></i>
                      </button>
                    </div>
                    <div>
                      <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">城市建筑</span>
                      <h3 class="text-xl font-bold text-white mt-2">城市夜景</h3>
                      <p class="text-white/80 text-sm mt-1">华灯初上的城市，展现出与白天截然不同的魅力。</p>
                    </div>
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                      <span class="ml-2 text-sm font-medium">慢生活</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 456</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 37</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 照片项目 4 -->
            <div class="masonry-item">
              <div class="photo-card bg-white rounded-xl overflow-hidden shadow-lg relative">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/76/800/700" alt="森林漫步" class="w-full object-cover">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div class="absolute inset-0 photo-overlay flex flex-col justify-between p-6">
                    <div class="flex justify-end space-x-3">
                      <button class="like-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-heart"></i>
                      </button>
                      <button class="share-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-share-alt"></i>
                      </button>
                      <button class="expand-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-expand"></i>
                      </button>
                    </div>
                    <div>
                      <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">自然风光</span>
                      <h3 class="text-xl font-bold text-white mt-2">森林漫步</h3>
                      <p class="text-white/80 text-sm mt-1">走进森林，感受大自然的气息，聆听鸟儿的歌声。</p>
                    </div>
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                      <span class="ml-2 text-sm font-medium">慢生活</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 289</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 22</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 照片项目 5 -->
            <div class="masonry-item">
              <div class="photo-card bg-white rounded-xl overflow-hidden shadow-lg relative">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/87/800/900" alt="传统文化" class="w-full object-cover">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div class="absolute inset-0 photo-overlay flex flex-col justify-between p-6">
                    <div class="flex justify-end space-x-3">
                      <button class="like-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-heart"></i>
                      </button>
                      <button class="share-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-share-alt"></i>
                      </button>
                      <button class="expand-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-expand"></i>
                      </button>
                    </div>
                    <div>
                      <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">人文风情</span>
                      <h3 class="text-xl font-bold text-white mt-2">传统文化</h3>
                      <p class="text-white/80 text-sm mt-1">传统手工艺人的精湛技艺，传承着千年的文化底蕴。</p>
                    </div>
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                      <span class="ml-2 text-sm font-medium">慢生活</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 342</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 29</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 照片项目 6 -->
            <div class="masonry-item">
              <div class="photo-card bg-white rounded-xl overflow-hidden shadow-lg relative">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/96/800/1100" alt="海边日落" class="w-full object-cover">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div class="absolute inset-0 photo-overlay flex flex-col justify-between p-6">
                    <div class="flex justify-end space-x-3">
                      <button class="like-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-heart"></i>
                      </button>
                      <button class="share-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-share-alt"></i>
                      </button>
                      <button class="expand-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-expand"></i>
                      </button>
                    </div>
                    <div>
                      <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">自然风光</span>
                      <h3 class="text-xl font-bold text-white mt-2">海边日落</h3>
                      <p class="text-white/80 text-sm mt-1">夕阳西下，金色的阳光洒在海面上，美轮美奂。</p>
                    </div>
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                      <span class="ml-2 text-sm font-medium">慢生活</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 512</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 43</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 照片项目 7 -->
            <div class="masonry-item">
              <div class="photo-card bg-white rounded-xl overflow-hidden shadow-lg relative">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/100/800/600" alt="城市建筑" class="w-full object-cover">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div class="absolute inset-0 photo-overlay flex flex-col justify-between p-6">
                    <div class="flex justify-end space-x-3">
                      <button class="like-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-heart"></i>
                      </button>
                      <button class="share-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-share-alt"></i>
                      </button>
                      <button class="expand-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-expand"></i>
                      </button>
                    </div>
                    <div>
                      <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">城市建筑</span>
                      <h3 class="text-xl font-bold text-white mt-2">现代建筑</h3>
                      <p class="text-white/80 text-sm mt-1">现代建筑的设计美学，展现了城市的发展与变化。</p>
                    </div>
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                      <span class="ml-2 text-sm font-medium">慢生活</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 387</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 31</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 照片项目 8 -->
            <div class="masonry-item">
              <div class="photo-card bg-white rounded-xl overflow-hidden shadow-lg relative">
                <div class="relative overflow-hidden">
                  <img src="https://picsum.photos/id/101/800/1000" alt="人文风情" class="w-full object-cover">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div class="absolute inset-0 photo-overlay flex flex-col justify-between p-6">
                    <div class="flex justify-end space-x-3">
                      <button class="like-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-heart"></i>
                      </button>
                      <button class="share-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-share-alt"></i>
                      </button>
                      <button class="expand-btn bg-white/90 hover:bg-white text-primary p-2 rounded-full shadow-md">
                        <i class="fa-solid fa-expand"></i>
                      </button>
                    </div>
                    <div>
                      <span class="bg-secondary/90 text-white text-xs font-semibold px-3 py-1 rounded-full">人文风情</span>
                      <h3 class="text-xl font-bold text-white mt-2">当地市集</h3>
                      <p class="text-white/80 text-sm mt-1">热闹的当地市集，充满了生活气息和地方特色。</p>
                    </div>
                  </div>
                </div>
                <div class="p-6">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                      <span class="ml-2 text-sm font-medium">慢生活</span>
                    </div>
                    <div class="flex items-center space-x-3">
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-heart mr-1"></i> 276</span>
                      <span class="text-sm text-dark/60"><i class="fa-solid fa-comment mr-1"></i> 25</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 加载更多按钮 -->
          <div class="text-center mt-16">
            <button id="load-more" class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 shadow-lg flex items-center justify-center mx-auto">
              <span>加载更多照片</span>
              <i class="fa-solid fa-spinner ml-2 animate-spin hidden"></i>
            </button>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 底部导航栏 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.1)] z-40 md:hidden">
      <div class="flex justify-around items-center h-16">
        <a href="#" class="flex flex-col items-center justify-center text-dark/60 hover:text-primary transition-colors">
          <i class="fa-solid fa-home text-xl"></i>
          <span class="text-xs mt-1">首页</span>
        </a>
        <a href="#" class="flex flex-col items-center justify-center text-dark/60 hover:text-primary transition-colors">
          <i class="fa-solid fa-map-marker-alt text-xl"></i>
          <span class="text-xs mt-1">旅行</span>
        </a>
        <a href="#" class="flex flex-col items-center justify-center text-primary">
          <i class="fa-solid fa-images text-xl"></i>
          <span class="text-xs mt-1">照片</span>
        </a>
        <a href="#" class="flex flex-col items-center justify-center text-dark/60 hover:text-primary transition-colors">
          <i class="fa-solid fa-video text-xl"></i>
          <span class="text-xs mt-1">视频</span>
        </a>
        <a href="#" class="flex flex-col items-center justify-center text-dark/60 hover:text-primary transition-colors">
          <i class="fa-solid fa-calendar text-xl"></i>
          <span class="text-xs mt-1">日历</span>
        </a>
      </div>
    </nav>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white/70 py-12 md:py-16 mt-auto md:mt-0 md:mb-0 mb-16">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div class="md:col-span-2">
            <h3 class="text-xl font-bold text-white mb-4 flex items-center">
              <i class="fa-solid fa-paper-plane mr-2"></i>
              慢生活
            </h3>
            <p class="mb-6">记录旅行中的每一个精彩瞬间，分享生活中的点滴感悟。慢下来，感受生活的美好。</p>
            <div class="flex space-x-4">
              <a href="#" class="bg-white/10 hover:bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                <i class="fa-brands fa-weibo"></i>
              </a>
              <a href="#" class="bg-white/10 hover:bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                <i class="fa-brands fa-wechat"></i>
              </a>
              <a href="#" class="bg-white/10 hover:bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                <i class="fa-brands fa-instagram"></i>
              </a>
              <a href="#" class="bg-white/10 hover:bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center transition-colors">
                <i class